import React, { Component } from 'react'
import { connect } from 'dva'
import { Modal, Tree, Row, Col, Transfer, message } from 'antd';

const { TreeNode } = Tree;
class UserModal extends Component {
    constructor(props) {
        super(props)
        this.state = {
            targetKeys: [],
            selectedKeys: []
        }
    }
    renderTreeNodes = treeList => treeList.map((item) => {
        if (item.depts) {
            return (
                <TreeNode title={item.dept_name} key={item.dept_id} dataRef={item} value={item.dept_id}>
                    {this.renderTreeNodes(item.depts)}
                </TreeNode>
            );
        } else {
            return (
                <TreeNode title={item.dept_name} key={item.dept_id} dataRef={item} value={item.dept_id}>
                </TreeNode>
            );
        }
    })

    render() {
        const { visible, depts, userList, treeNodeSelect, modalOk, modalCancel } = this.props;
        const selectTreeNode = (selectedKeys, e) => {
            this.setState({
                selectedKeys: []
            })
            treeNodeSelect(selectedKeys)
        }
        const handleChange = (targetKeys, direction, moveKeys) => {
            if(direction == 'right') {
                if(targetKeys.length > 1) {
                    message.warning('仅供单选！')
                } else {
                    if(this.state.targetKeys.length != 1) {
                        this.setState({
                            targetKeys
                        })
                    } else {
                        message.warning('仅供单选！')
                    }
                }
            } else {
                this.setState({
                    targetKeys
                })
            }
        }
        const handleSelectChange = (sourceSelectedKeys, targetSelectedKeys) => {
            this.setState({
                selectedKeys: [...sourceSelectedKeys, ...targetSelectedKeys]
            })
        }
        const handleOk = () => {
            let user = {};
            userList.map((v) => {
                if(v.user_id == this.state.targetKeys) {
                    user = v;
                }
            })
            modalOk(user)
        }
        const handleCancel = () => {
            modalCancel()
        }
        return (
            <Modal visible={visible} title="选择用户" zIndex="3000" width={800} onOk={handleOk} onCancel={handleCancel}>
                <Row>
                    <Col xm={8} xl={8} lg={8}>
                        <Tree showLine={true} onSelect={selectTreeNode}>
                            {this.renderTreeNodes(depts)}
                        </Tree>
                    </Col>
                    <Col xm={16} xl={16} lg={16}>
                        <Transfer
                            dataSource={userList}
                            targetKeys={this.state.targetKeys}
                            onChange={handleChange}
                            render={item => item.user_name}
                            onSelectChange={handleSelectChange}
                            selectedKeys={this.state.selectedKeys}
                        />
                    </Col>
                </Row>

            </Modal>
        )
    }
}
export default UserModal;